<template>
    <div>

        <h1>房态信息显示</h1>
        <input type="text" v-model="page.name" placeholder="房态名称">
        <input type="text" v-model="page.id" placeholder="房态编号">
        <input type="button" value="查询" @click="chax">
        <table class="table">
            <thead>
                <tr>
                    <td>房态id</td>
                    <td>房态名称</td>
                    <td>状态</td>
                    <td>房态数量</td>
                    <td>电话</td>
                    <td>删除</td>
                </tr>
            </thead>

            <tbody>
                <tr v-for="e in data">
                    <td>{{ e.id }}</td>
                    <td>{{ e.houseName }}</td>
                    <td>{{ e.state }}</td>
                    <td>{{ e.sum }}</td>
                    <td>{{ e.phone }}</td>
                    <td>
                        <input type="button" value="删除">
                    </td>
                </tr>
            </tbody>
        </table>
        一共{{pageinfo.count}}条,每页显示{{page.pageSize}}条,一共{{pageinfo.listcount}}页,当前第{{page.pageIndex}}页
        <input type="button" value="首页" @click="pageid(1)">
        <input type="button" value="下一页" @click="pageid(2)">
        <input v-for="a in pageinfo.listcount" :value="a" type="button" @click="getpage(a)">
        <input type="button" value="上一页" @click="pageid(3)">
        <input type="button" value="尾页" @click="pageid(4)">
        <input type="number" v-model="page.pageIndex"><input type="button" value="跳转" @click="tiaozhuan">
        <select v-model="page.pageSize" @click="yrl">
            <option value="3">3</option>
            <option value="5">5</option>
            <option value="8">8</option>
        </select>
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router' 


const router=useRouter();

const chax=()=>{
    page.value.pageIndex=1;
    show();
}


const yrl=()=>{
    show();
}
const tiaozhuan=()=>{
    show();
}

const getpage=(val:any)=>{
    page.value.pageIndex=val
    show();
}

//分页
const pageid=(val:any)=>{
    if(val==1) {
        page.value.pageIndex=1;
        show();
    }
    if(val==2) {
        if(page.value.pageIndex<pageinfo.value.listcount)
    {
        page.value.pageIndex+=1;
        show();
    }
    }
    if(val==3) {
        if(page.value.pageIndex>1)
    {
        page.value.pageIndex-=1;
        show();
    }
    }
    if(val==4) {
        page.value.pageIndex=pageinfo.value.listcount;
        show();
    }

}

onMounted(()=>{
    show();
})

const data=ref([{
    "id": 0,
      "houseName": "",
      "state": true,
      "sum": "",
      "phone": ""
}])
const page=ref({
    pageIndex:1,
    pageSize:3,
    id:0,
    name:"",
})

const pageinfo=ref({
    count:0,
    listcount:0
})

const show=()=>{
    axios.get("https://localhost:7206/api/Login/ShowHouse",{params:page.value}).then(res=>{
        data.value=res.data.listcount

        pageinfo.value.count=res.data.count,

        pageinfo.value.listcount=Math.ceil(pageinfo.value.count/page.value.pageSize);
    })
}
</script>

<style scoped>

</style>